<template>
    <view class="rush-container">
        <view class="banner">
            限时抢购 爆款直降
        </view>

        <view class="countdown-container">
            <view class="countdown-title">本场抢购结束还剩</view>
            <view class="countdown">
                <view class="countdown-box">00</view>
                <view class="countdown-separator">:</view>
                <view class="countdown-box">45</view>
                <view class="countdown-separator">:</view>
                <view class="countdown-box">32</view>
            </view>
        </view>

        <view class="product-list">
            <view class="product-item" v-for="(item, index) in productList" :key="index">
                <view class="product-image">
                    商品图片
                    <view class="rush-tag">限量{{ item.stock }}件</view>
                </view>
                <view class="product-info">
                    <view class="product-name">{{ item.name }}</view>
                    <view class="product-price">
                        <view class="current-price">¥{{ item.currentPrice }}</view>
                        <view class="original-price">¥{{ item.originalPrice }}</view>
                    </view>
                    <view class="progress-container">
                        <view class="progress-text">
                            <span>已抢{{ item.soldCount }}件</span>
                            <span>还剩{{ item.stock - item.soldCount }}件</span>
                        </view>
                        <view class="progress-bar">
                            <view class="progress-fill" :style="'width:' + (item.soldCount / item.stock * 100) + '%'">
                            </view>
                        </view>
                    </view>
                    <button class="buy-button" :disabled="item.soldCount >= item.stock">{{ item.soldCount >= item.stock
                        ? '已抢完' : '立即抢购' }}</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'

const productList = ref([
    {
        name: '智能蓝牙音箱',
        currentPrice: '99.9',
        originalPrice: '299.9',
        stock: 100,
        soldCount: 80
    },
    {
        name: '便携式咖啡机',
        currentPrice: '199.9',
        originalPrice: '599.9',
        stock: 50,
        soldCount: 45
    },
    {
        name: '无线充电宝',
        currentPrice: '59.9',
        originalPrice: '159.9',
        stock: 200,
        soldCount: 150
    },
    {
        name: '智能手表',
        currentPrice: '299.9',
        originalPrice: '899.9',
        stock: 80,
        soldCount: 60
    }
])
</script>

<style lang="scss" scoped>
.rush-container {
    padding: 15px;
    padding-bottom: 70px;
}

.banner {
    width: 100%;
    height: 150px;
    background-color: #ff6a6a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    background-image: linear-gradient(to right, #ff6a6a, #ff9999);
}

.countdown-container {
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;

    .countdown-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }

    .countdown {
        display: flex;
        justify-content: center;
        align-items: center;

        .countdown-box {
            background-color: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 18px;
            font-weight: bold;
        }

        .countdown-separator {
            margin: 0 5px;
            color: #333;
            font-weight: bold;
        }
    }
}

.product-list {
    .product-item {
        background-color: #fff;
        border-radius: 12px;
        margin-bottom: 15px;
        overflow: hidden;

        .product-image {
            position: relative;
            width: 100%;
            height: 200px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;

            .rush-tag {
                position: absolute;
                top: 10px;
                left: 10px;
                background-color: rgba(255, 106, 106, 0.9);
                color: white;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
            }
        }

        .product-info {
            padding: 15px;

            .product-name {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
            }

            .product-price {
                display: flex;
                align-items: baseline;
                margin-bottom: 10px;

                .current-price {
                    color: #ff6a6a;
                    font-size: 20px;
                    font-weight: bold;
                    margin-right: 8px;
                }

                .original-price {
                    color: #999;
                    font-size: 14px;
                    text-decoration: line-through;
                }
            }

            .progress-container {
                margin-bottom: 15px;

                .progress-text {
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                    color: #666;
                    margin-bottom: 5px;
                }

                .progress-bar {
                    width: 100%;
                    height: 4px;
                    background-color: #f5f5f5;
                    border-radius: 2px;
                    overflow: hidden;

                    .progress-fill {
                        height: 100%;
                        background-color: #ff6a6a;
                        transition: width 0.3s ease;
                    }
                }
            }

            .buy-button {
                width: 100%;
                background-color: #ff6a6a;
                color: white;
                border: none;
                border-radius: 25px;
                padding: 10px;
                font-size: 16px;
                font-weight: bold;

                &:disabled {
                    background-color: #ccc;
                }
            }
        }
    }
}
</style>